import { DrawerForm, ProFormTextArea, ProFormText, ProFormSelect, ProFormRadio, ProFormDateTimePicker, ProField } from '@ant-design/pro-components';
import { Form } from 'antd';
import React, { useImperativeHandle, forwardRef, useState } from 'react';
import $http from '@/services/http.service.v2';
import { firstValueFrom } from "rxjs"
import ProFormJSONEditor from "./ProFromJSONEditor"

export default forwardRef(function ScheduleEditorDrawer(props, ref) {
  const [open, setOpen] = useState(false)
  const [form] = Form.useForm();
  useImperativeHandle(ref, () => ({
    open: (role) => {
      setOpen(true)
      form.setFieldsValue({...role});
    },
  }));
  return (
    <DrawerForm
      title="编辑任务"
      width={600}
      form={form}
      open={open}
      onOpenChange={setOpen}
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        const res = await firstValueFrom($http.updateSchedule(values)).catch(e => e)
        if (!res.status) {
          return
        }
        props.onFinish && props.onFinish(res)
        return true;
      }}
    >
      <ProFormText name="id" hidden />
      <ProFormText name="schedule_name" label="任务名" />
      <ProFormTextArea name="content" label="配置" initialValue={JSON.stringify({"tom": 666})} />
      <ProFormDateTimePicker format={'YYYY-MM-DD HH:mm'} name="start_time" label="开始时间" />
      
      <ProFormSelect 
        name="schedule_type" label="类型"
        initialValue={1}
        options={[
          { label: '单次', value: 1 },
          { label: '每天', value: 2 },
        ]}
      />
      <ProFormRadio.Group
        name="status"
        label="启用状态"
        initialValue={1}
        options={[
          {label: '启用', value: 1},
          {label: '停用', value: 2},
        ]}
      />
    </DrawerForm>
  )
})